import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './AIAssessment.css';
import SymptomsSelectionPage from './SymptomsSelectionPage';

const AIAssessment = () => {
  const navigate = useNavigate();
  // 状态变量 - 控制表单数据
  const [formData, setFormData] = useState({
    treatmentPurpose: '',
    symptoms: {
      anxiety: false,
      emotionalFluctuation: true,
      selfHarm: true,
      loss: false,
      depression: false
    },
    currentSituation: '',
    painLevel: {
      anxiety: false,
      emotionalFluctuation: true,
      selfHarm: true,
      loss: false,
      depression: false
    },
    severityLevel: 2, // 1-5之间的值
    currentMood: 0, // 0-4, 0为最差
    moodDescription: '我很痛苦，同时也很悲伤。我觉得我想要存在，但我也想停止存在。',
    feelingReason: '因为无论事实如何，无论多么不可能，都一定是绝对的事实！',
    shareData: true
  });
  
  // 症状选择页面显示状态
  const [showSymptomsPage, setShowSymptomsPage] = useState(false);
  
  // 选择的症状数据 - 用于显示在当前/过去的情况中
  const [selectedSymptoms, setSelectedSymptoms] = useState(['头痛', '左大腿疼']);

  // 字符数限制
  const maxChars = 500;

  // 情绪选项
  const moodOptions = [
    { value: 0, icon: '😞', label: '非常差' },
    { value: 1, icon: '🙁', label: '较差' },
    { value: 2, icon: '😐', label: '一般' },
    { value: 3, icon: '🙂', label: '较好' },
    { value: 4, icon: '😊', label: '很好' }
  ];
  
  // 处理下拉选择变化
  const handleSelectChange = (field, value) => {
    // 更新表单数据
    setFormData({
      ...formData,
      [field]: value
    });
  };
  
  // 处理当前/过去情况点击
  const handleSituationClick = () => {
    // 显示症状选择页面
    setShowSymptomsPage(true);
  };
  
  // 处理症状确认
  const handleSymptomsConfirm = (symptoms) => {
    // 保存选择的症状
    setSelectedSymptoms(symptoms);
    // 关闭症状选择页面
    setShowSymptomsPage(false);
  };

  // 处理症状选择变化
  const handleSymptomToggle = (section, symptom) => {
    // 更新表单数据中的症状对象
    setFormData({
      ...formData,
      [section]: {
        ...formData[section],
        [symptom]: !formData[section][symptom]
      }
    });
  };

  // 处理严重程度滑块变化
  const handleSeverityChange = (e) => {
    // 更新表单数据
    setFormData({
      ...formData,
      severityLevel: parseInt(e.target.value, 10)
    });
  };

  // 处理情绪选择
  const handleMoodChange = (value) => {
    setFormData({
      ...formData,
      currentMood: value
    });
  };

  // 处理文本输入变化
  const handleTextChange = (field, value) => {
    setFormData({
      ...formData,
      [field]: value
    });
  };

  // 处理数据分享开关
  const handleShareDataToggle = () => {
    setFormData({
      ...formData,
      shareData: !formData.shareData
    });
  };
  
  // 处理下一步按钮点击
  const handleNextStep = () => {
    // 在这里可以处理表单提交逻辑
    console.log('提交的评估数据:', formData);
    // 导航到分析页面
    navigate('/analyzing', { state: { symptoms: selectedSymptoms } });
  };

  return (
    <>
      {/* 如果显示症状选择页面，则渲染SymptomsSelectionPage组件 */}
      {showSymptomsPage && (
        <SymptomsSelectionPage onConfirm={handleSymptomsConfirm} onCancel={() => setShowSymptomsPage(false)} />
      )}
      
      {/* 主页面容器 */}
      <div className="assessment-container">
        {/* 顶部状态栏 */}
        <div className="status-bar">
          <span className="time">9:41</span>
          <div className="icons">
            <span className="signal">●●●●</span>
            <span className="wifi">●</span>
            <span className="battery">●</span>
          </div>
        </div>

        {/* 进度指示器 - 显示在第3步 */}
        <div className="progress-indicator">
          <div className="step completed">
            <div className="dot">✓</div>
          </div>
          <div className="step-line"></div>
          <div className="step completed">
            <div className="dot">✓</div>
          </div>
          <div className="step-line"></div>
          <div className="step active">
            <div className="dot"></div>
            <div className="label">步骤3</div>
          </div>
        </div>

        {/* 页面标题和说明 */}
        <div className="ai-title">
          <h2>我们的人工智能仍然需要信</h2>
          <p className="subtitle">请填写以下内容以下一步。</p>
        </div>

        {/* 表单部分 */}
        <div className="assessment-form">
          {/* 最困扰的症状部分 */}
          <div className="form-section">
            <div className="section-header">
              <h3>最困扰您的症状</h3>
              <a href="#" className="see-more">选择更多</a>
            </div>
            <div className="symptoms-group">
              <button 
                className={`symptom-tag ${formData.symptoms.anxiety ? 'active' : ''}`}
                onClick={() => handleSymptomToggle('symptoms', 'anxiety')}
              >
                焦虑
              </button>
              <button 
                className={`symptom-tag ${formData.symptoms.emotionalFluctuation ? 'active' : ''}`}
                onClick={() => handleSymptomToggle('symptoms', 'emotionalFluctuation')}
              >
                情绪波动
              </button>
              <button 
                className={`symptom-tag ${formData.symptoms.selfHarm ? 'active' : ''}`}
                onClick={() => handleSymptomToggle('symptoms', 'selfHarm')}
              >
                自我伤害
              </button>
              <button 
                className={`symptom-tag ${formData.symptoms.loss ? 'active' : ''}`}
                onClick={() => handleSymptomToggle('symptoms', 'loss')}
              >
                失眠的
              </button>
              <button 
                className={`symptom-tag ${formData.symptoms.depression ? 'active' : ''}`}
                onClick={() => handleSymptomToggle('symptoms', 'depression')}
              >
                痴迷
              </button>
            </div>
          </div>

          {/* 目的治疗部分 */}
          <div className="form-section">
            <div className="section-header">
              <h3>目前的物品治疗</h3>
            </div>
            <div className="select-container">
              <div className="select-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 6 12 12 16 14"></polyline>
                </svg>
              </div>
              <select 
                className="dropdown-select" 
                value={formData.treatmentPurpose}
                onChange={(e) => handleSelectChange('treatmentPurpose', e.target.value)}
              >
                <option value="">选择您使用的药品</option>
                <option value="option1">氟西汀</option>
                <option value="option2">帕罗西汀</option>
                <option value="option3">舍曲林</option>
                <option value="option4">氟伏沙明</option>
                <option value="option5">西酞普兰</option>
                <option value="option6">文拉法辛</option>
              </select>
              <div className="select-arrow">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </div>
            </div>
          </div>

          {/* 当前症状部分 */}
          <div className="form-section">
            <div className="section-header">
              <h3>您现在的症状</h3>
              <a href="#" className="see-more">选择更多</a>
            </div>
            <div className="symptoms-group">
              <button 
                className={`symptom-tag ${formData.symptoms.anxiety ? '' : 'active'}`}
                onClick={() => handleSymptomToggle('symptoms', 'anxiety')}
              >
                焦虑
              </button>
              <button 
                className={`symptom-tag ${formData.symptoms.emotionalFluctuation ? 'active' : ''}`}
                onClick={() => handleSymptomToggle('symptoms', 'emotionalFluctuation')}
              >
                情绪波动
              </button>
              <button 
                className={`symptom-tag ${formData.symptoms.selfHarm ? 'active' : ''}`}
                onClick={() => handleSymptomToggle('symptoms', 'selfHarm')}
              >
                自我伤害
              </button>
              <button 
                className={`symptom-tag ${formData.symptoms.loss ? '' : 'active'}`}
                onClick={() => handleSymptomToggle('symptoms', 'loss')}
              >
                失眠的
              </button>
              <button 
                className={`symptom-tag ${formData.symptoms.depression ? '' : 'active'}`}
                onClick={() => handleSymptomToggle('symptoms', 'depression')}
              >
                抑郁
              </button>
            </div>
          </div>

          {/* 当前情况部分 - 点击触发症状选择页面 */}
          <div className="form-section">
            <div className="section-header">
              <h3>当前/过去的情况</h3>
            </div>
            <div 
              className="select-container"
              onClick={handleSituationClick}
              style={{ cursor: 'pointer' }}
            >
              <div className="select-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                  <polyline points="9 22 9 12 15 12 15 22"></polyline>
                </svg>
              </div>
              <div className="dropdown-select">
                {selectedSymptoms.length > 0 
                  ? selectedSymptoms.join(', ') 
                  : '请选择症状'}
              </div>
              <div className="select-arrow">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </div>
            </div>
          </div>

          

          {/* 严重程度滑块部分 */}
          <div className="form-section">
            <div className="section-header">
              <h3>疼痛程度</h3>
            </div>
            <div className="slider-container">
              <div className="slider-track">
                <input 
                  type="range" 
                  min="1" 
                  max="5" 
                  value={formData.severityLevel}
                  className="severity-slider"
                  onChange={handleSeverityChange}
                />
                <div className="slider-labels">
                  <span>最低</span>
                  <span>最高</span>
                </div>
              </div>
            </div>
          </div>

          {/* 当前情绪部分 */}
          <div className="form-section">
            <div className="section-header">
              <h3>你现在的情绪</h3>
            </div>
            <div className="mood-selector">
              {moodOptions.map((mood, index) => (
                <div 
                  key={index}
                  className={`mood-option ${formData.currentMood === mood.value ? 'selected' : ''}`}
                  onClick={() => handleMoodChange(mood.value)}
                >
                  <div className="mood-icon">{mood.icon}</div>
                </div>
              ))}
            </div>
          </div>

          {/* 心情描述部分 */}
          <div className="form-section">
            <div className="section-header">
              <h3>你会如何描述你现在的心情？</h3>
            </div>
            <div className="text-input-container">
              <textarea
                value={formData.moodDescription}
                onChange={(e) => handleTextChange('moodDescription', e.target.value)}
                maxLength={maxChars}
                placeholder="描述你的心情..."
              ></textarea>
              <div className="char-counter">
                {formData.moodDescription.length}/{maxChars}
              </div>
            </div>
          </div>

          {/* 感受原因部分 */}
          <div className="form-section">
            <div className="section-header">
              <h3>是什么让你有这样的感受？</h3>
            </div>
            <div className="text-input-container reason-container">
              <textarea
                value={formData.feelingReason}
                onChange={(e) => handleTextChange('feelingReason', e.target.value)}
                maxLength={maxChars}
                placeholder="描述原因..."
              ></textarea>
              <div className="char-counter">
                {formData.feelingReason.length}/{maxChars}
              </div>
            </div>
          </div>

          {/* 数据分享选项 */}
          <div className="data-sharing">
            <div className="sharing-text">
              向弗洛伊德 AI 聊天机器人人发送数据<br />
              分享您的数据见解，以便我们下次更好地改进
            </div>
            <label className="toggle-switch">
              <input 
                type="checkbox" 
                checked={formData.shareData}
                onChange={handleShareDataToggle}
              />
              <span className="toggle-slider"></span>
            </label>
          </div>

          {/* 下一步按钮 */}
          <button className="next-button" onClick={handleNextStep}>
            下一步 →
          </button>
        </div>
      </div>
    </>
  );
};

export default AIAssessment; 